<template>
	<div style="position: relative;">
		<img :src="APIDomainName + forum.picture" alt="" style="margin:0 auto;width: 100%;position: relative;">
		<div style="background-color: rgba(8, 6, 30, 0.6);position: absolute;top: 0;width: 100%;">
			<div style="width: 90%;padding: 1rem 5% 1rem 5%;">
				<div style="display: flex;margin: 1rem auto 0;align-items: center;justify-content: space-between;">
					<div style="display: flex;align-items: center;width: 70%;">
						<div style="width: 30%;">
							<van-image width="100%" radius="25px" :src="APIDomainName + forum.pic"></van-image>
						</div>
						<div style="margin-left: 5%;">
							<div style="font-weight: bold;font-size: 26px;color: #ffffff;margin-bottom: 0.3rem;">
								{{forum.title}}
							</div>
							<div style="font-weight: bold;font-size: 14px;color: #ffffff;display: flex;">
								<div>
									<!-- <van-icon name="gem" size="20" color="#01CBE2" /> -->
									<img src="@/assets/diamond.png"
										style="width: 1.3rem;height: 1.3rem;position: relative;" alt="">
								</div>
								<div
									style="background-image: linear-gradient(to right, rgba(8, 6, 30, 0.7), rgba(8, 6, 30, 0.1));width: 5.5rem;color: #01CBE2;text-align: center;margin-left:-0.6rem ;height: 1.2rem;margin-top: 0.1rem;">
									开发者入驻</div>
							</div>
							<div style="margin-top: 0.3rem;color: #ffffff;font-size: 16px;">{{forum.concern}}· 帖子
								{{forum.postings}}
							</div>
						</div>
					</div>
					<div style="width: 25%;text-align: right;font-size: 40px;color: red;font-weight: bold;"
						v-if="isConcern" @click="onClickConcern()">
						<van-button round
							style="background-color: #ffffff; color: #01CBE2;width: 100%;font-weight: bold;font-size: 18px;border: 0;">
							关注
						</van-button>
					</div>
					<div style="width: 25%;text-align: right;font-size: 40px;color: red;font-weight: bold;" v-else
						@click="onClickCancelConcern()">
						<van-button round
							style="background-color:rgba(8, 6, 30, 0.5); color: #ffffff;width: 100%;font-weight: bold;font-size: 18px;border: 0;">
							已关注
						</van-button>
					</div>
				</div>
			</div>
			<div
				style="background-color:#ffffff;width: 100%;border-radius: 1.5rem;height: 50rem;border-radius: 1.5rem 1.5rem 0 0;">
				<div style="width: 40%;padding: 1rem 5% 1rem 0;">
					<van-tabs v-model="activeName" color="#01CBE2" animated>
						<van-tab title="全部" title-style="font-size:20px;" name="a">
						</van-tab>
						</van-tab>
						<van-tab title="我的" title-style="font-size:20px;" name="b"> </van-tab>
					</van-tabs>
				</div>
				<div :class="activeName =='a' ? 'show' : 'hidden'" style="margin-bottom:2rem ;">
					<div v-for="(item,i) in forumList" :key="i">
						<div style="background-color: #F6F7F9;height: 0.5rem;"></div>
						<div style="width: 90%;padding: 1rem 5% 1rem 5%;">
							<div style="display: flex;align-items: center;justify-content: space-between;">
								<div style="display: flex;align-items: center;">
									<div>
										<img :src="APIDomainName + item.avatar"
											style="border-radius: 50%;width: 3.5rem;"></img>
									</div>
									<div style="margin-left: 1rem;">
										<div style="display: flex;">
											<div style="font-weight: bold;margin-right: 0.3rem;">{{item.name}}</div>
											<div>
												<img width="35%" src="@/assets/dr.png"></img>
											</div>
										</div>
										<div style="color: #BABFC2;">
											{{shelfTime(item.date)}} · <span style="color: #01CBE2;font-weight: bold;">
												综合
											</span>
										</div>
									</div>
								</div>
								<div>
									<img style="width: 3rem;" src="@/assets/sign.png"
										@click="showPopup(item.id,item.user_id)"></img>
								</div>
							</div>
							<div style="margin:0.5rem 0 1rem 0;">{{item.detail}}</div>
							<div>
								<img :src="APIDomainName + item.pic" alt=""
									style="border-radius: 1rem;width: 100%;height: 25%;">
							</div>
							<div
								style="width:80%;margin:0 10% 0 10%;display: flex;color: #878C92;align-items: center;margin:1rem auto 0;">
								<div style="display: flex;align-items: center;width: 43%;"><img src="@/assets/share.png"
										style="width: 2rem;" alt="" @click="onForward(item.id)">
									<!-- <div style="margin-left: 0.5rem;">12</div> -->
								</div>
								<div style="display: flex;align-items: center;width: 44%;"
									@click="onReviewDetail(item.id)"><img src="@/assets/review.png" style="width: 2rem;"
										alt="">
									<div style="margin-left: 0.5rem;">{{item.count}}</div>
								</div>
								<div style="display: flex;align-items: center;width: 13%;" @click="onClick(item.id,i)">
									<div v-if="like.indexOf(item.id)!=-1"><img src="@/assets/likebule.png"
											style="width: 2rem;" alt="" /></div>
									<div v-else><img src="@/assets/like.png" style="width: 2rem;" alt="" /></div>
									<div style="margin-left: 0.5rem;">{{item.likeit}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div :class="activeName =='b' ? 'show' : 'hidden'">
					<div v-if="myforumList==0">
						<van-empty class="custom-image" image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
							description="暂时没有数据" />
					</div>
					<div v-for="(item,index) in forumList" :key="index" v-show="item.user_id==user.id" v-else>
						<div style="background-color: #F6F7F9;height: 0.5rem;"></div>
						<div style="width: 90%;padding: 1rem 5% 1rem 5%;">
							<div style="display: flex;align-items: center;justify-content: space-between;">
								<div style="display: flex;align-items: center;">
									<div>
										<img :src="APIDomainName + item.avatar"
											style="border-radius: 50%;width: 3.5rem;"></img>
									</div>
									<div style="margin-left: 1rem;">
										<div style="display: flex;">
											<div style="font-weight: bold;margin-right: 0.3rem;">{{item.name}}</div>
											<div>
												<img width="35%" src="@/assets/dr.png"></img>
											</div>
										</div>
										<div style="color: #BABFC2;">
											{{shelfTime(item.date)}} · <span style="color: #01CBE2;font-weight: bold;">
												我的
											</span>
										</div>
									</div>
								</div>
								<div>
									<img style="width: 3rem;" src="@/assets/sign.png"
										@click="showPopup(item.id,item.user_id)"></img>
								</div>
							</div>
							<div style="margin:0.5rem 0 1rem 0;">{{item.detail}}</div>
							<div>
								<img :src="APIDomainName + item.pic" alt=""
									style="border-radius: 1rem;width: 100%;height: 25%;">
							</div>
							<div
								style="width:80%;margin:0 10% 0 10%;display: flex;color: #878C92;align-items: center;margin-top: 1rem;">
								<div style="display: flex;align-items: center;width: 43%;"><img src="@/assets/share.png"
										style="width: 2rem;" alt="" @click="onForward(item.id)">
									<!-- <div style="margin-left: 0.5rem;">12</div> -->
								</div>
								<div style="display: flex;align-items: center;width: 44%;"
									@click="onReviewDetail(item.id)"><img src="@/assets/review.png" style="width: 2rem;"
										alt="">
									<div style="margin-left: 0.5rem;">{{item.count}}</div>
								</div>
								<div style="display: flex;align-items: center;width: 13%;" @click="onClick(item.id,index)">
									<div v-if="like.indexOf(item.id)!=-1"><img src="@/assets/likebule.png"
											style="width: 2rem;" alt="" /></div>
									<div v-else><img src="@/assets/like.png" style="width: 2rem;" alt="" /></div>
									<div style="margin-left: 0.5rem;">{{item.likeit}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<van-popup v-model="myshow" round position="bottom">
					<div
						style="background-color: #EBEFF0;width: 15%;height: 0.5rem;border-radius: 20px;margin: 1rem auto 0;">
					</div>
					<div @click="deleteReview()" v-show="user_id==user.id"
						style="display: flex;align-items: center;margin-top: 1rem;margin-left: 2rem;">
						<van-icon name="delete-o" size="30" />
						<div style="margin-left: 1rem;font-size: 18px;">删除</div>
					</div>
					<div style="display: flex;align-items: center;margin-top: 1rem;margin-left: 2rem;"
						@click="updateReview()" v-show="user_id==user.id">
						<van-icon name="edit" size="30" />
						<div style="margin-left: 1rem;font-size: 18px;">修改</div>
					</div>
					<div style="display: flex;align-items: center;margin-top: 1rem;margin-left: 2rem;">
						<van-icon name="share-o" size="30" />
						<div style="margin-left: 1rem;font-size: 18px;" @click="onShare()">分享</div>
					</div>
					<van-button block @click="hiddenPopupmy"
						style="background-color: #F8F8F8; color: #666666;width: 90%;margin: 0 auto; margin-bottom: 1rem;font-size: 18px;margin-top: 1rem;border-radius: 10px;">
						取消
					</van-button>
				</van-popup>

				<div v-show="isShow" @click="onTurn(forum.id)"
					style="width: 1.5rem;height: 1.5rem;border-radius: 50%;background-color: #01CBE2;padding: 0.8rem;position: fixed;bottom: 4rem;right: 1rem;">
					<img src="@/assets/write.png" style="width: 1.5rem;" alt="">
				</div>
				<van-popup v-model="showforward" style="width: 80%;border-radius: 20px;padding: 1rem 1rem 2rem;">
					<van-field v-model="remark" rows="5" autosize type="textarea" placeholder="写下你的想法" />
					<div style="background-color: #F5F7F8;padding: 1rem;margin: 0 1rem;border-radius: 10px;">
						<div><span style="color: #666;">//</span>@{{user.name}}: <span
								style="color: #C7CBCE;">转发动态</span>
						</div>
						<div style="background-color: #ccc;height: 0.07rem;margin-top: 1rem;"></div>
						<div style="display: flex;margin-top: 1rem;">
							<van-image width="30%" :src="APIDomainName + forum.picture" radius="10px"
								style="width: 30%;height: 30%;"></van-image>
							<div style="margin-left: 1rem;">
								<div style="font-size: 18px;">
									@{{review.name}} <span style="color: #B9BEC1;">评价了</span>{{forum.title}}
								</div>
								<div style="margin-top: 1rem;">{{shelfTime(review.date)}}</div>
							</div>
						</div>
						<div style="color: #666;margin-top: 1rem;">
							{{review.detail}}
						</div>
					</div>
					<div style="width: 100%;">
						<van-button size="large"
							style="margin-left: 78%;background-color: #14C5CD; color: #ffffff;width: 20%;font-weight: bold;font-size: 16px;border: 0;margin-top: 1rem;border-radius: 10px;height: 2.5rem;"
							@click="onPublish()">
							发布
						</van-button>
					</div>
				</van-popup>
			</div>
		</div>
	</div>

</template>



<script>
	import {
		Toast,
		Dialog
	} from "vant";
	import {
		getForumDetailByIdAPI,
		getForumReviewByIdAPI,
		addConcernForumAPI,
		deleteConcernForumItemAPI,
		ischeckedForumAPI,
		getForumMyReviewByIdAPI,
		deleteForumReviewAPI,
		addLikeForumAPI,
		deleteLikeForumAPI,
		getForumReviewIslikeByIdAPI,
		getforwardAPI
	} from "@/api/forum.js";
	import {
		getUserLocal,
	} from "@/utils/auth.js"
	import * as Tools from "@/utils/tools.js"

	export default {
		data() {
			return {
				forum: {},
				isConcern: true,
				activeName: 'a',
				forumList: [],
				myforumList: [],
				isShow: true,
				myshow: false,
				myid: null,
				showdialog: false,
				user: {},
				isdata: true,
				showforward: false,
				review: {},
				remark: '',
				user_id: '',
				like: [],
			}
		},
		methods: {
			onReviewDetail(id) {
				this.$router.push({
					name: "forumReviewDetail",
					params: {
						id
					},
				});
			},
			onPublish() {
				this.showforward = false;
				this.$toast({
					message: '发布成功',
					icon: 'success',
				});;
			},
			onForward(id) {
				this.showforward = true;
				getforwardAPI(id).then(result => {
					this.review = result.data;
					console.log(result.data)
				}).catch(() => {});
			},
			onTurn(id) {
				this.$router.push({
					name: 'forumReview',
					params: {
						id
					}
				});
			},
			handleScroll() {
				// 页面滚动距顶部距离
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
					document.body.scrollTop
				var scroll = scrollTop - this.i;
				this.i = scrollTop;
				if (scroll < 0) {
					this.isShow = true;
				} else {
					this.isShow = false;
				}
			},
			beforeDestroy() {
				window.removeEventListener('scroll', this.handleScroll, true);
			},
			onBack() {
				this.$router.go(-1);
			},
			shelfTime(i) {
				let date = new Date(i);
				// console.log(date instanceof Date);
				return Tools.dateFormat(date, "yyyy年MM月dd日");
			},
			onShare() {
				this.$toast("分享成功");
				this.myshow = false;
			},
			onClickConcern() {
				let params = {
					product_id: this.forum.id,
				};
				//2.使用封装后的接口,注意：接口有参数
				addConcernForumAPI(params).then(result => {
					this.$toast(result.msg);
				}).catch(() => {});
				this.isConcern = false;
			},
			onClickCancelConcern() {
				this.isConcern = true;
				let ids = this.forum.id;
				deleteConcernForumItemAPI(ids).then(result => {
					this.$toast(result.msg);
				}).catch(() => {});
			},
			onClick(id, index) {
				let list = this.like;
				if (list.indexOf(id) == -1) {
					// 加到数组中
					this.forumList[index].likeit += 1;
					this.like.push(id);
					let data = {
						review_id: id,
					}
					//2.使用封装后的接口,注意：接口有参数
					addLikeForumAPI(data).then(result => {
						this.$toast(result.msg);
					}).catch(() => {});
					// console.log(this.like)
					// console.log(this.forumList[index].likeit)
				} else {
					this.forumList[index].likeit -= 1;
					for (var i in this.like) {
						if (this.like[i] == id) {
							this.like.splice(i, 1);
						}
						let ids = id;
						deleteLikeForumAPI(ids).then(result => {
							this.$toast(result.msg);
						}).catch(() => {});
					}
					// console.log(this.like)
					// console.log(this.forumList[index].likeit)
				}
			},
			showPopup(id, user_id) {
				this.myshow = true;
				this.myid = id;
				this.user_id = user_id;
			},
			hiddenPopupmy() {
				this.myshow = false;
			},
			deleteReview() {
				this.myshow = false;
				this.$dialog.confirm({
					title: "删除动态",
					message: "确认删除此动态吗",
				}).then(() => {
					let ids = this.myid;
					deleteForumReviewAPI(ids).then((result) => {
						// this.$toast(result.msg);
						this.getForumMyReview();
						this.getForumReview();
					});
				}).catch(() => {
					router.push({
						name: "forum"
					});
				});
			},
			updateReview() {
				let id = this.myid;
				this.$router.push({
					name: "updateForumReview",
					params: {
						id
					},
				});
			},
			getForumReview() {
				let id = this.$route.params.id;
				getForumReviewByIdAPI(id).then(result => {
					this.forumList = result.data;
					console.log(result)
					this.like = [];
					getForumReviewIslikeByIdAPI(id).then(result => {
						result.data.forEach(item => {
							this.like.push(item.id);
						});
					}).catch(() => {});
				}).catch(() => {});
			},
			getForumMyReview() {
				let id = this.$route.params.id;
				getForumMyReviewByIdAPI(id).then(result => {
					// this.$toast(result.msg);
					this.myforumList = result.data;
					
				}).catch(() => {});
			}
		},
		created() {
			this.getForumReview();
			this.getForumMyReview();
			let id = this.$route.params.id;
			getForumDetailByIdAPI(id).then((result) => {
				// console.log(result);
				this.forum = result.data;
			});
			let params = {
				product_id: this.$route.params.id,
			};
			console.log(params)
			//2.使用封装后的接口,注意：接口有参数
			ischeckedForumAPI(params).then(result => {
				let is_checked = result.data[0].is_checked;
				if (is_checked == 1) {
					this.isConcern = false;
				} else {
					this.isConcern = true;
				}
			}).catch(() => {});
		},
		mounted() {
			//初始页面数据
			this.user = getUserLocal();
			window.addEventListener('scroll', this.handleScroll, true);
			// 监听（绑定）滚轮 滚动事件
		}
	}
</script>


<style>
	.show {
		display: block;
	}

	.hidden {
		display: none;
	}

	.van-overlay {
		background-color: rgba(0, 0, 0, 0.2);
	}

	.custom-image .van-empty__image {
		width: 100px;
		height: 100px;
		margin-top: 5rem;
	}

	.van-field {
		font-size: 18px;
	}
</style>
